<template>
	<div class="page">
		<!-- 排序 -->
		<div class="sort-view c-panel">
			<div class="btns-view">
				<Button 
    					type="primary" 
    					@click="toggle = !toggle">
    					{{toggle ? '收起' : '展开'}}
    				</Button>
    				<div class="btns-sort-view"
    					v-show="toggle"
    					style="margin-left: 10px;">
	    				<Button 
	    					type="primary" 
	    					@click="click2Sort()"
	    					:loading="sortBtnLoading">
	    					{{data.sortable ? '保存排序' : '选择排序'}}
	    				</Button>
	    				<Button 
	    					type="ghost" 
	    					style="margin-left: 10px;"
	    					v-if="data.sortable"
	    					@click="click2CancelSort()">
	    					取消排序
	    				</Button>
    				</div>
    				<Button 
    					type="primary"
    					style="margin: 0px 10px;"
    					:loading="data.loading"
    					@click="click2Refresh()">
    					刷新属性
    				</Button>

    				<Button 
					type="success" 
					@click="click2Syn"
					:loading="synBtnLoading">
					同步属性
				</Button>
			</div>
			<div class="sort-data-view" v-show="toggle">
				<CAttributeTagGroupSortView
					:data="data">
				</CAttributeTagGroupSortView>
			</div>
		</div>
		<div class="data-view c-panel">
    			<CAttributeTagListView
        			:data="data"
        			@on-action="clickItem2ListView">
    			</CAttributeTagListView>
		</div>
		<!-- 职业属性编辑窗口 -->
	    <CAttributeTagEditModal
	    		:data="editData"
	    		:groups="data.data"
	    		@on-submit="submit2Edit"
	    		@on-del="submit2Del">
	    </CAttributeTagEditModal>
	</div>
</template>
<script>
	import CAttributeTagGroupSortView from '@/pages/tag/view/CAttributeTagGroupSortView.vue';
	import CAttributeTagListView from '@/pages/tag/view/CAttributeTagListView.vue';
	import CAttributeTagEditModal from '@/pages/tag/view/CAttributeTagEditModal.vue';
	
	import TagService from '@/services/TagService.js';
	const $tagService = TagService();
	export default {
		components: {
			CAttributeTagGroupSortView, 
			CAttributeTagListView, 
			CAttributeTagEditModal
		},
		data() {
			return {
				toggle: true,
				sortBtnLoading: false,
				synBtnLoading: false,
				originEtags: [],
				data: {
					loading: true,
					sortable : false,
					etags: [],
					selData: {
						atId: null,
						gindex: 0,
						cindex: 0
					},
					data: [],
				},
				editData: {
					isShow: false,
					isSubmit: false,
					isDel: false,
					actionType: 1,
					cindex: 0,
					atag: null,//要修改的atag数据
					group: {//传入的分组
						data : null,
						gindex: 0
					},
					nGroup: {//改变后的分组
						data : null,
						gindex: 0
					},
					data: {
						aid: null,
						name: null,
						groupId: null,
						bgColor: '#F8F8F8',
						textColor: '#FF0000',
						type: 1,
						stype: 0
					}
				}
			};
		},
		mounted() {
			this.getAttributeTags();
		},
		methods: {
			click2Sort: function() {
				var $this = this;
				if(!$this.data.sortable) {
					$this.data.sortable = true;
				} else {
					var sorts = [];
					var len = $this.data.data.length;
					$this.data.data.forEach(function(item, index) {
						sorts.push({
							id: item.gid,
							sort: index
						})
					});
					$this.sortBtnLoading = true;
					$tagService.editSorts2AtagGroup(JSON.stringify(sorts))
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						var msg = res.msg;
						if(code == 100) {
							$this.data.sortable = false;
						}
						$this.sortBtnLoading = false;
						$this.$Message.info(msg);
					}, function(error) {
						$this.sortBtnLoading = false;
						$this.$Message.error('网络异常，请稍后再试！');
					});
				}
			},
			click2CancelSort: function() {//取消排序
				var $this = this;
				$this.data.sortable = false;
			},
			clickItem2ListView(type, data) {
				var $this = this;
				if(type == 'addAtag') {//新增属性标签
					this.editData.isShow = true;
					this.editData.isSubmit = false;
					this.editData.isDel = false;
					
					this.editData.actionType = 1;
					this.editData.cindex = 0;
					this.editData.group = {
						data: data.group	,
						gindex: data.gindex
					}
					this.editData.nGroup = {
						data: null,
						gindex: 0
					}
					
					this.editData.data = {
						atId: null,
						name: null,
						groupId: data.group.gid,
						bgColor: '#F8F8F8',
						textColor: '#FF0000',
						type: data.group.type,
						stype: 0
					}
					console.log(this.editData);
				} else if(type == 'editAtag') {//弹出编辑
					this.editData.isShow = true;
					this.editData.isSubmit = false;
					this.editData.isDel = false;
					
					this.editData.actionType = 2;
					this.editData.cindex = data.cindex;
					this.editData.group = {
						data: data.group	,
						gindex: data.gindex
					}
					this.editData.nGroup = {
						data: null,
						gindex: 0
					}
					
					var item = data.atag;
					this.editData.data = {
						atId: item.atId,
						name: item.name,
						groupId: item.groupId,
						bgColor: item.bgColor,
						textColor: item.textColor,
						type: item.type,
						stype: item.stype
					}
				}
			},
			click2Refresh: function() {//refresh
				this.getAttributeTags();
			},
			click2Syn() {//同步
				var $this = this;
				this.$Modal.confirm({
                    title: "同步关联职业属性",
                    content: "您确定要向服务器同步关联职业属性吗？",
                    onOk() {
                    		var tags = [];
						$this.data.etags.forEach(function(item, index, array) {
							var etag = $this.originEtags[index];
							if(item.isRelated != etag.isRelated || item.atId != etag.atId) {
								tags.push({
									atId: item.atId,
									etNamesCode: item.etNamesCode,
									isRelated: item.isRelated
								});
							}
						});
						if(tags.length > 0) {
							console.log(tags)
							$this.relateEtags(tags);
						} else {
							$this.$Message.warn("您还没有要同步的关联职业属性！");
						}
                    }
                });
			},
			submit2Edit(form) {//编辑框-确认事件
				var $this = this;
				var cindex = form.cindex;
				var actionType = form.actionType;
				var data = form.data;
				
				//分组，如果分组改变
				var group = form.group;
				var nGroup = form.nGroup;
				var sort = group.data.atags.length;
				if(actionType == 2) {//编辑
					if(nGroup.data != null) {
						sort = nGroup.data.atags.length;
					}
				}
				var params = {
					atId: data.atId,
					name: data.name,
					gid: data.groupId,
					bgColor: data.bgColor,
					textColor: data.textColor,
					sort: sort,
					type: data.type,
					stype: data.stype
				};
				//加载 
				form.isSubmit = true;
				//请求服务器
				$tagService.editAttributeTag(params)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						var data = res.data;
						//本地数据更新
						if(actionType == 1) {//新增
							group.data.atags.push(data);
						} else {//编辑
							if(nGroup.data == null) {//一个分组下
								var atag = group.data.atags[cindex];
								atag.name = data.name;
								atag.bgColor = data.bgColor;
								atag.textColor = data.textColor;
							} else {
								nGroup.data.atags.push(data);
								$this.data.selData = {
									gindex: nGroup.gindex,
									cindex: sort,
									atId: data.atId
								}
								group.data.atags.splice(cindex, 1);
							}
						}
						//隐藏
						form.isShow = false;
						$this.$Message.success(res.msg);
					} else {
						$this.$Message.error(res.msg);
					}
					form.isSubmit = false;
				}, function(error) {
					$this.$Message.error('服务器或网络异常！');
					form.isSubmit = false;
				});
			},
			submit2Del(form) {//删除
				var atId = form.data.atId;
				var $this = this;
				this.$Modal.confirm({
                    title: "删除职业属性",
                    content: "您确定要删除职业属性吗？",
                    onOk() {	
                    		form.isDel = true;
                    		$tagService.del2Atag(atId)
							.then(function(response) {
								var res = response.data;
								var code = res.rescode;
								if(code == 100) {
									$this.data.selData.cindex--;
									form.group.data.atags.splice(form.cindex);
									form.isShow = false;
									$this.$Message.success(res.msg);
								} else {
									$this.$Message.error(res.msg);
								}
								form.isDel = false;
							}, function(error) {
								form.isDel = false;
								$this.$Message.error("网络异常，请稍后再试！");
							});
                    }
                });
			},
            getAttributeTags() {
            		var $this = this;
				this.data.loading = true;
				$this.data.etags = [];
				$this.originEtags = [];
				$tagService.getAttributeTags()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						var data = res.data;
						$this.data.data = data;
						$this.data.loading = false;
						//atId
						var atId = null;
						if(data.length > 0) {
							if(data[0].atags.length > 0) {
								atId = data[0].atags[0].atId;
							}
						}
						$this.data.selData = {
							atId: atId,
							gindex: 0,
							cindex: 0
						}
						$this.getEntityTags2Related()
					}
				}, function(error) {
					$this.data.loading = false;
					$this.$Message.error("网络异常，请稍后再试！");
				});
			},
			getEntityTags2Related() {
				var $this = this;
				var atId = this.data.atId;
				$tagService.getEntityTags2Related()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						var data = res.data;
//						$this.data.etags = data;
						data.forEach(function(item, index, array) {
							var etNames = JSON.parse(item.etNames);
							$this.data.etags.push({
								atId: item.atId,
								isRelated: item.isRelated == 1,
								checked: false,
								etNames: item.etNames,
								etNamesCode: item.etNamesCode
							});
							$this.originEtags.push({
								atId: item.atId,
								isRelated: item.isRelated == 1,
								etNames: item.etNames,
								etNamesCode: item.etNamesCode
							});
						});
					}
				});
			},
			relateEtags(tags) {
				var $this = this;
				$this.sysBtnLoding = true;
				$tagService.relateEtags(JSON.stringify(tags))
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						if(code == 100) {
							$this.$Message.success(res.msg);
						} else {
							$this.$Message.error(res.msg);
						}
						$this.sysBtnLoding = false;
					}, function(error) {
						$this.sysBtnLoding = false;
						$this.$Message.error("服务器异常或网络异常");
					});
			}
		}
	}
</script>

<style>
	.ivu-transfer {
		bottom: 30px !important;;
		position: absolute !important;
		top: 15px !important;;
	}
	.ivu-transfer-operation {
		margin: 0px 10px 0px 20px !important;;
	}
</style>

<style scoped="scoped">
	.page {
	}
	
	.sort-view {
		margin-bottom: 10px;
	}
	.sort-view .btns-view {
		display: flex;
		display: -webkit-flex;
	}
	.sort-view .btns-sort-view {
		display: flex;
		display: -webkit-flex;
	}
	
	.sort-view .sort-data-view {
		margin-top: 10px;
	}
	
	.data-view {
		margin: 0 auto;
	}
</style>